<template>
    <div class="content">
        <div class="main" id="mainthree"></div>
    </div>
</template>
  
<script>
import * as echarts from 'echarts';
export default {

    mounted() {
        this.getEcharts()
    },
    methods: {
        getEcharts() {
            var chartDom = document.getElementById('mainthree');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {       // 坐标轴指示器，坐标轴触发有效
                        type: 'line'   // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                // legend: {
                //     textStyle: {
                //         color: '#333',
                //         fontSize: 12
                //     },
                //     // right: 30,
                //     bottom: 0,
                //     itemWidth: 10,
                //     itemHeight: 15,
                //     data: [
                //         { name: '累计总数', icon: `image://${require('../../../../assets/img/logo.png')}` },
                //         { name: '累计增速', icon: `image://${require('../../../../assets/img/logo.png')}` },
                //     ]
                // },
                // toolbox: {
                //   feature: {
                //     saveAsImage: {}
                //   }
                // },
                grid: {
                    top: '12%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['T-10', 'T-9', 'T-8', 'T-7', 'T-6', 'T-5', 'T-4', 'T-3', 'T-2' ,'T-1'],
                    }

                ],
                yAxis: [
                    {
                        type: 'value',
                        name: "单位:--",
                        nameTextStyle: {   //  单位样式
                            color: "#19CBFF",    //  字体颜色
                            fontSize: 14, 	//  字体大小
                            padding: [0, 15, 4, 0]		//  内填充
                        },
                        splitLine: { show: false },
                        axisTick: { show: true },
                        axisLabel: { show: true },
                        axisLine: { show: true },
                        axisLabel: {
                            show: true,  //这里的show用于设置是否显示x轴下的字体 默认为true　　　　　　　
                            interval: 0,  //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。　　　　　　　　　
                            textStyle: {   //textStyle里面写x轴下的字体的样式               
                                color: '#0C4342',
                                fontSize: 14
                            }
                        },
                        axisLine: {
                            show: true,  //这里的show用于设置是否显示x轴那一条线 默认为true
                            lineStyle: { //lineStyle里面写x轴那一条线的样式
                                color: '#13373A',
                                width: 1,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
                            }
                        }
                    }
                ],

                series: [{
                    markPoint: {
                        data: [
                            {
                                yAxis: '190',
                                xAxis: 'T-2',
                            },
                        ],
                        symbol: 'circle', // 标记图形
                        symbolSize: 8, // 标记图形的大小
                        // 标注点的样式
                        itemStyle: {
                            color: '#FFF90A', // 标注点颜色
                        },
                    },
                    markLine: {
                        // 锁定最后一个元素展示纵向虚线
                        symbol: ['none', 'none'],
                        label: { show: false },
                        data: [{ xAxis: 9 - 1 }],
                        label: {
                            show: true, // 是否展示文字
                            color: "#FFF90A",
                            fontSize: 14,
                            formatter: function () {
                                return "当前值：420"
                            },
                           
                        },
                        lineStyle: {
                            color: "#0392C1",
                            type: "solid" // 实线，不写默认虚线
                        }
                    },
                    name: '预测日志',
                    type: 'line',
                    // stack: 'Total',
                    smooth: false,
                    lineStyle: {
                        width: 1,
                        color: '#0392C1'
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#0392C1'
                            },
                            {
                                offset: 1,
                                color: 'transparent'
                            }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [20, 40, 31, 13, 19, 30, 20, 34, 190, 230, 120]
                },
                ]
            };

            option && myChart.setOption(option);
        }
    },
};
</script>
  
<style scoped>
.content {
    /* // margin-top: 17px; */
    width: 100%;
    height: 100%;
    /* background: url("../../assets/image/scienceBg.png") 0 0 no-repeat; */
    background-size: 100% 100%;
}

.main {
    height: 100%;
    width: 100%;
    /* // border: 1px solid red; */
}
</style>